<template>
  <div class="table-doctor">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button  type="primary" @click="handleAdd(0,'')" >
          添加医生信息
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>


        <el-form ref="queryForm"   size="mini"
                 :inline="true"  :model="queryForm" >

        <el-form-item label="姓名" prop="name"  >
          <el-input v-model="queryForm.name" placeholder="医生姓名"></el-input>

        </el-form-item>
        </el-form>

        <el-button type="primary" style="margin-left: 20px" @click="search(1,'')"  size="mini">条件查询</el-button>


      </vab-query-form-right-panel>
    </vab-query-form>

    <el-dialog
      title="添加医生信息"
      :visible.sync="dialogFormVisible"
      width="450px"
      destroy-on-close

    >

      <el-form ref="form"   :rules="rules"  :model="form" >
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="姓名" prop="name" >
          <el-input v-model="form.name" ></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="性别"  required>
          <el-select v-model="form.gender" placeholder="请选择"      style="width: 100%">
            <el-option
              style="width: 100%"
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="身份证" prop="cardNo">
          <el-input  v-model="form.cardNo"  onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"  style="width: 100%" ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">

          <el-form-item label="联系电话" prop="contactNumber" >
          <el-input v-model="form.contactNumber" ></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="12">

          <el-form-item label="职称"prop="jobTitle"  >
          <el-input v-model="form.jobTitle" ></el-input>

        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="科室"  >
          <el-input v-model="form.department" ></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="执业医生资格证"  >
          <el-input v-model="form.ppqc" ></el-input>

        </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="账号类型"  required v-if="!isshow">
          <el-select v-model="type" placeholder="请选择"      style="width: 100%" @change="changetype">
            <el-option
              style="width: 100%"
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item   required v-if="!type&&!isshow"
>
          <el-select v-model="form.uname" placeholder="请选择"                 no-data-text="暂无账号可用"
                     style="width: 100%"
          >
            <el-option
              style="width: 100%"
              v-for="item in unames"
              :key="item.uname"
              :label="item.userName"
              :value="item.uname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-row :gutter="20" v-if="type&&!isshow" >

             <el-col :span="12">

        <el-form-item label="用户名" prop="uname" >
          <el-input v-model="form.uname" ></el-input>

        </el-form-item>
             </el-col>
          <el-col :span="12">
        <el-form-item label="密码" prop="password" >
          <el-input v-model="form.password" ></el-input>

        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" >取 消</el-button>
        <el-button type="primary" @click="savedoctor">保 存</el-button>

      </div>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="listLoading"

      tooltip-effect="dark"
      style="width: 100%"

    >
      <el-table-column
        prop="institutionName"
        label="机构"
      >
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        label="性别"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.gender==1">男</span>
          <span v-if="scope.row.gender==0">女</span>

        </template>
      </el-table-column>
      <el-table-column
        prop="contactNumber"
        label="联系电话"
      >
      </el-table-column>
      <el-table-column
        prop="cardNo"
        label="身份证"
      >
      </el-table-column>
      <el-table-column
        prop="jobTitle"
        label="职称"
      >
      </el-table-column>
      <el-table-column
        prop="department"
        label="科室"
      >
      </el-table-column>

      <el-table-column
        prop="ppqc"
        label="执业医师资格证"
      >
      </el-table-column>
      <el-table-column label="禁用状态" prop="disabled">
        <template slot-scope="scope">

          <el-switch
            v-model="scope.row.disabled"
            class="demo"
            active-color="#F04134"
            active-text="禁用"
            inactive-color="#11CED2"
            inactive-text="启用"
            @change="switchChange(scope.$index, scope.row)"

          />

        </template>


      </el-table-column>


      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="200px"

      >
        <template slot-scope="scope">

          <el-button type="text"  @click="handleAdd(1,scope.row)" >  修改 <i class="el-icon-edit"></i></el-button>


        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>

</template>

<script>
    import {savedoctor,search,revesedoctor,disable,enabled,searchdoctor} from "../../api/doctor";
    import Template from "../nursing/template";
    import { isIdentityId } from "@/api/validate"


    export default {
        name: "Doctor",
        components: {Template},
        data(){
            var checkIdentitytionId  = (rule, value, callback) => {
                var errorMsg = isIdentityId(value);
                if (errorMsg != "") {

                    callback(new Error(errorMsg));
                }else {



                    callback();
                }

            }

            return{
              dialogFormVisible:false,
              id:0,
              tableData:[],
              listLoading:false,
              total:0,
              background:true,
              isshow:false,
              type:1,
              types:[
                  {
                      value: 0,
                      label: '选择已有账号'

                  },
                  {
                      value: 1,
                      label: '创建新的账号'

                  },
              ],
              form:{
                  contactNumber:"",//联系电话
                  department:"",//科室
                  gender:1,//性别
                  institutionNumber:"",
                  jobTitle:"",//职称
                  name:"",//姓名
                  uname:"",//用户名
                  password:"",//密码
                  ppqc:"",//执业医生资格证
                  cardNo:"",

              },
              options: [{
                  value: 0,
                  label: '女'

              },
                  {
                      value: 1,
                      label: '男'

                  },
              ],
              unames:[

              ],
              rules: {


                  contactNumber: [

                      {required: true, message: '联系电话', trigger: 'blur'}

                  ],

                  jobTitle: [

                      {required: true, message: '职称', trigger: 'change'}

                  ],
                  name: [

                      {required: true, message: '姓名', trigger: 'blur'}

                  ],
                  uname: [

                      {required: true, message: '用户名', trigger: 'blur'}

                  ],
                  password: [

                      {required: true, message: '密码', trigger: 'blur'}

                  ],

                  cardNo: [
                      {required: true, validator: checkIdentitytionId , trigger: "blur" }
                  ],

              },
              queryForm:{
                  limit:10,
                  currPageNo:1,
                  institutionNumber:"",
                  name:"",
              },
          }
        },
        methods:{
            handleAdd(id,data){
                this.id=id
                if(id){
                    this.form={...data}
                    this.isshow=true

                }else {
                    this.isshow=false
                    this.type=1
                    this.form={
                        contactPhone:"",//联系电话
                        department:"",//科室
                        gender:1,//性别
                        institutionNumber:localStorage.getItem('institutionNumber'),
                        jobTitle:"",//职称
                        name:"",//姓名
                        uname:"",//用户名
                        password:"",//密码
                        ppqc:"",//执业医生资格证
                    }
                }

                this.dialogFormVisible=true
            },

            savedoctor(){
                   this.form.institutionNumber=localStorage.getItem('institutionNumber')
                console.log(this.form)

                this.$refs['form'].validate((valid) => {
                    if (valid) {

                            if(this.id){
                                revesedoctor(this.form).then(res =>{
                                    console.log(res)
                                         this.$baseMessage("修改成功",'success');
                                          this.dialogFormVisible=false
                                    this.search()

                                })
                            }else {
                                savedoctor(this.form).then(res =>{
                                    this.$baseMessage("添加成功",'success');
                                    this.dialogFormVisible=false
                                    this.search()
                                    console.log(res)

                                })
                            }

                    } else {

                        return false;
                    }
                });


            },
            search(id){
                if(id){

                    this.queryForm.currPageNo=1


                }else {


                }
                this.listLoading=true
                search(this.queryForm).then(res =>{
                    console.log(res)
                    this.tableData=res.data.data
                    this.total=res.data.total


                })
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.search();
            },
            changetype(value){
                this.$set(this.form,'password','')
                this.$set(this.form,'uname','')

                if(value){

                        this.$set(this.form,'uname','')


                }else {
                        let organNumber=localStorage.getItem('institutionNumber')
                        searchdoctor({organNumber}).then(res =>{
                            console.log(res)
                            this.unames=res.data
                            this.$set(this.form,'uname',res.data[0].uname)


                        })



                }
            },
            switchChange(index,row){

                  let  data={
                      institutionNumber:row.institutionNumber,
                      number:row.number,
                      status:row.disabled
                  }

                if(row.disabled==true){


                    disable(data).then(res => {


                        this.$baseMessage("已禁用",'success');


                     })
                }else {

                    enabled(data).then(res => {

                        this.$baseMessage("已启用",'success');



                    })

                }
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);

            }
        },

        created() {
            this.queryForm.institutionNumber=localStorage.getItem('institutionNumber')
            this.search()
        }
    }
</script>

<style scoped>
  .table-doctor >>> .demo .el-switch__label {
    position: absolute !important;
    display: none !important;
    color: #fff !important;
  }
  .table-doctor >>>.el-switch__core{
    width: 50px !important;
  }
  /*打开时文字位置设置*/
  .table-doctor >>> .demo .el-switch__label--right {
    z-index: 1 !important;

  }
  /*关闭时文字位置设置*/
  .table-doctor >>> .demo .el-switch__label--left {
    z-index: 1 !important;
    left: 19px !important;
    margin-right: 0px !important;
  }
  .table-doctor  >>> .demo .el-switch__label.is-active span{
    font-size: 12px !important;
  }

  .table-doctor >>> .demo .el-switch__label.is-active {
    display: block !important;
  }
  .table-doctor >>> .demo.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important !important;
  }


</style>
